<template>
  <div class="a-workbench">
    <div class="top">
      <div style="display: flex;line-height: 30px;">
        <img
          src="../assets/logo.png"
          height="30px"
          style="margin-right: 10px;"
        />
        <div class="change-type">
          <span
            class="text"
            :class="{ active: appType == 'card' }"
            @click="setApptype('card')"
            >卡片</span
          >
          <span class="text-line">|</span>
          <span
            class="text"
            :class="{ active: appType == 'mini' }"
            @click="setApptype('mini')"
            >图标</span
          >
        </div>
      </div>
      <div class="todo">
        <div class="todo-panel"></div>
      </div>
    </div>
    <div class="center">
      <div class="apps" v-if="appType == 'card'">
        <div class="item" v-for="(app, index) in apps" @click="openApp(app)">
          <div class="card">
            <div
              class="bg"
              :style="{ 'background-image': 'url(' + getImgUrl(app.img) + ')' }"
            ></div>
            <div class="bottom-info">
              <span class="title">
                {{ app.title }}
              </span>
              <div class="info">
                {{ app.info }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mini" v-if="appType == 'mini'">
        <div
          class="item"
          v-for="(app, index) in apps"
          @click="openApp(app)"
          :title="app.info"
        >
          <div class="card">
            <div
              style="height:3rem;width:3rem;margin: 0 auto;display: block;position: relative;"
            >
              <img class="icon" :src="app.icon" />
            </div>
            <div class="bottom-info">
              <span
                class="title"
                :title="app.title"
                :style="{
                  'font-size': app.title.length > 6 ? '0.6rem' : '1rem'
                }"
              >
                {{ app.title }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="list-pop"></div>
    </div>
  </div>
</template>

<script>
var ipcRenderer;
if (window.require) {
  ipcRenderer = window.require("electron").ipcRenderer;
}
import { globalBus } from "@/assets/js/globalBus.js";
import { localApps } from "../common/Apps.js";

export default {
  data() {
    return {
      infoNum: {
        bug: 0,
        demand: 0,
        email: 0
      },
      apps: localApps,
      appType: "mini",
      alyxApp: {},
      loadCdTag: false
    };
  },
  methods: {
    openAlyx() {
      if (this.alyxStatus.code == 0) return;
      this.openApp(this.alyxApp);
    },
    setApptype(type) {
      localStorage.setItem("appType", type);
      this.appType = type;
    },
    getImgUrl(url) {
      if (url && url.trim() != "") {
        return url;
      }
      return "./static/img/apps/empty_bg.png";
    },
    openApp(app) {
      if (app.type == "web" && !ipcRenderer) {
        window.open(app.url);
        return;
      }

      if (app.type == "window") {
        ipcRenderer.send("open-new-window", {
          url: "/rpmanager/index.html#/",
          local: true
        });
        return;
      }

      globalBus.$emit("openApp", app);
    },
    loadApps() {
      var _this = this;
    }
  },
  created(){
    //加载更多web应用
    globalBus.$on("loadWebApps", apps => {
      this.apps = localApps.concat(apps);
    });
  },
  mounted() {
    this.loadApps();
    this.appType = localStorage.getItem("appType");
    if (!this.appType) {
      localStorage.setItem("appType", "mini");
      this.appType = "mini";
    }

    //载入设置的禅道地址
    if (!this.loadCdTag) {
      var cdUrl = localStorage.getItem("cdUrl");
      if (!cdUrl) {
        cdUrl = "http://192.168.2.166/";
        localStorage.setItem("cdUrl", cdUrl);
      }
      this.apps.push({
        title: "禅道",
        icon: cdUrl + "/theme/default/images/main/icon.png",
        info: "奥威亚禅道",
        url: cdUrl,
        loginUrl: cdUrl + "/user-login.html",
        type: "web"
      });
      this.loadCdTag = true;
    }

    for (var x in localApps) {
      if (localApps[x].code == "alyx") {
        this.alyxApp = localApps[x];
        break;
      }
    }
  }
};
</script>

<style lang="less">
.theme-dark {
  .a-workbench .mini .item .card {
    background: #000;

    .bottom-info {
      color: #fff;
    }
  }
}

.theme-light {
  .a-workbench .mini .item .card {
    background: #ffffff;
  }
}

.a-workbench {
  height: 100%;
  background: 100%;
  padding: 1rem;
  box-sizing: border-box;

  * {
    transition: all 0.1s linear;
  }

  .top {
    display: flex;
    width: 100%;

    .todo {
      padding-right: 128px;
      flex: 1;
      display: block;

      .todo-panel {
        margin: 0 auto;
        display: inline-flex;

        .todo-item {
          overflow: hidden;
          cursor: pointer;
          padding: 6px 14px;
          box-shadow: 0 2px 6px rgba(100, 100, 100, 0.1);
          border-radius: 4px;
          margin: 0 10px;
          text-align: center;
          font-size: 0.8rem;
          color: #34495e;

          .big-num {
            font-size: 1.4rem;
            font-weight: bold;
          }
        }

        .todo-item:hover {
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }

        .bug {
          color: #e17055;
        }

        .email {
          color: #0984e3;
        }
      }
    }
  }

  .center {
    position: relative;
    flex: 1;
    height: 100%;
    overflow-y: auto;
  }
}

.a-workbench {
  display: flex;
  flex-direction: column;

  .mini {
    padding-top: 30px;
    display: table;
    margin: 0 auto;
    width: 70%;
    color: #34495e;

    .item {
      border-radius: 0.4rem;
      overflow: hidden;
      cursor: pointer;
      display: inline-block;
      height: auto !important;
      width: 8rem;
      padding: 10px;
      box-sizing: border-box;
      transition: all 0.2s cubic-bezier(1, -0.7, 0, 2);
      transition: all 0.1s ease-in-out;

      .card {
        box-sizing: border-box;
        padding: 10px;
        border: 1px transparent solid;
        text-align: center;
        position: relative;
        transition: all 0.1s ease;
        width: 100%;
        height: 100%;
        border-radius: 10px;

        .icon {
          max-width: 100%;
          max-height: 100%;
          width: auto;
          height: auto;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate3d(-50%, -50%, 0);
          -webkit-transform: translate3d(-50%, -50%, 0);
          border-radius: 2px;
        }

        .bottom-info {
          margin-top: 4px;
          white-space: nowrap;
          overflow: hidden;
        }
      }

      .card:hover {
        border: 1px #0984e3 solid;
      }
    }
  }

  .apps {
    padding-top: 30px;
    display: table;
    margin: 0 auto;
    width: 70%;

    .item {
      border-radius: 0.4rem;
      overflow: hidden;
      cursor: pointer;
      display: inline-block;
      height: 10rem;
      width: 25%;
      padding: 20px;
      box-sizing: border-box;
      // transition: all 0.2s cubic-bezier(1, -0.7, 0, 2);
      transition: all 0.1s ease-in-out;

      .card {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
        position: relative;
        transition: all 0.1s ease;
        width: 100%;
        height: 100%;

        .bg {
          transition: all 0.2s ease-in-out;
          background-position: center center;
          background-repeat: no-repeat;
          background-size: cover;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }

        .bottom-info {
          transition: all 0.2s ease-in-out;
          background: rgba(0, 0, 0, 0.5);
          font-size: 0.8rem;
          line-height: 1.6rem;
          height: 1.8rem;
          text-align: center;
          position: absolute;
          width: 100%;
          bottom: 0;
          color: #ffffff;
          overflow: hidden;

          .info {
            padding: 1rem;
            box-sizing: border-box;
          }
        }
      }
    }

    .item:hover {
      border-radius: 0.4rem;
      padding: 10px;

      .card {
        box-shadow: 0 0 4px rgba(155, 209, 255, 0.5);
        border-radius: 0.4rem;

        .bg {
          -webkit-filter: blur(5px);
          -moz-filter: blur(5px);
          -ms-filter: blur(5px);
          -o-filter: blur(5px);
          filter: blur(5px);
          filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);
        }

        .bottom-info {
          border-radius: 0.4rem;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);

          .title {
            font-size: 1rem;
            line-height: 2rem;
          }
        }
      }
    }
  }

  .change-type {
    color: #7f8c8d;

    .text-line {
      color: #bdc3c7;
      line-height: 1.2rem;
      transition: all 0.2s linear;
      transform: rotate(30deg);
      display: inline-block;
      width: auto;
    }

    .text {
      text-align: center;
      display: inline-block;
      width: 2.4rem;
      line-height: 1.2rem;
      cursor: pointer;
    }

    .text:hover,
    .text.active {
      font-size: 1.2rem;
      color: #2980b9;
    }

    .text.active {
      font-weight: bold;
    }
  }

  .change-type:hover {
    .text-line {
      transform: rotate(0deg);
    }
  }

  .login-load {
    padding: 6px 14px;
    font-size: 1rem;
    -webkit-animation: changeright 3s linear infinite;
  }
}

@media screen and (max-width: 1600px) {
  .a-workbench {
    .center {
      .apps {
        display: table;
        margin: 0 auto;
        width: 70%;

        .item {
          display: inline-block;
          height: 10rem;
          width: 33%;
        }
      }
    }
  }
}

@media screen and (max-width: 900px) {
  .a-workbench {
    .center {
      .apps {
        display: table;
        margin: 0 auto;
        width: 80%;

        .item {
          display: inline-block;
          height: 8rem;
          width: 50%;
        }
      }
    }
  }
}

/*自定义动画类----顺时针旋转（使用这个动画的时候才设置动画执行时间）*/
@-webkit-keyframes changeright {
  0% {
    -webkit-transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

/*自定义动画类----逆时针旋转（使用这个动画的时候才设置动画执行时间）*/
@-webkit-keyframes changeleft {
  0% {
    -webkit-transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(-180deg);
  }

  100% {
    -webkit-transform: rotate(-360deg);
  }
}
</style>
